<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <input type="text" />
    <script>
      // 防抖:通过setTimeout的方式，在一定的时间内，将多次触发变成一次触发
      // 节流：减少一段时间的触发频率
      const ipt = document.querySelector('input');
      ipt.addEventListener('keyup', debounce(submit));
      function submit(e) {
        // console.log(e);
        console.log(e.target.value);
        // console.log(e.target + '去后台请求');
      }
      function debounce(fn) {
        let timer = null;
        return function () {
          // console.log(this); //ipt
          // console.log(event.target); //ipt
          // 这里的e.target为ipt
          // 这里的arguments是通过调用返回回去的函数，传递的参数为1,2,3
          // console.log(arguments);
          if (timer) clearTimeout(timer);
          timer = setTimeout(() => {
            // 箭头函数自己没有arguments只能拿到外层的arguments
            // 将arguments以类数组的方式传到类数组中，调用fn
            // console.log(...arguments);
            fn.apply(this, arguments);
            // fn();
            timer = null;
          }, 1000);
        };
      }
    </script>
  </body>
</html>
